<template>
  <div class="box">{{ 1 + 1 }} : {{ a }} + {{ b }} = {{ c }}</div>
  <div class="container">
    <div class="c-1">
      <div class="c1-1">
        <div class="c11-1">1</div>
      </div>
      <div class="c1-2">
        <div class="c12-1">2</div>
      </div>
      <div class="c1-3">3</div>
    </div>
    <div class="c-2"></div>
  </div>
  <div>
    <button @click="add">添加</button>
  </div>
</template>
<script>
import { ref, computed, markRaw } from 'vue'
export default {
  data() {
    return {
      a: 1,
      b: 2,
      c: null,
      files: []
    }
  },
  methods: {
    add() {
      this.a++
      console.log(`helloworld`)
      //305 308
    }
  },
  mounted() {
    this.c = computed(() => {
      return this.a + this.b
    })
    console.log(999)
  }
}
</script>
<style type="text/css" lang="scss">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  //transform: translate(100px, 0) rotate(45deg) translate(100px, 0) translate(0, -50px) rotate(0) translate(0, 50px);
  animation: rotate 5s linear forwards;
}
@keyframes rotate {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(100px, 0);
  }
  20% {
    transform: translate(100px, 0) rotate(45deg);
  }
  30% {
    transform: translate(100px, 0) rotate(45deg) translate(100px, 0);
  }
  40% {
    transform: translate(100px, 0) rotate(45deg) translate(100px, 0) scale(1);
  }
  50% {
    transform: translate(100px, 0) rotate(45deg) translate(100px, 0) scale(1.2) translate(0, -50px) rotate(0) translate(0, 50px);
  }
  100% {
    transform: translate(100px, 0) rotate(45deg) translate(100px, 0) scale(1.2) translate(0, -50px) rotate(360deg) translate(0, 50px);
  }
}
</style>
